import { Button, DatePicker, Flex, Form, Pagination, Radio, Table, TableProps } from 'antd';
import style from '../css/Archivesummary.module.scss'
import { RadioChangeEvent } from 'antd/lib';
import { useRef, useState } from 'react';
import { PrinterOutlined, SearchOutlined, UploadOutlined } from '@ant-design/icons';
import { exportTableToPdf } from '../components/exportToPdf';
import { exportDataToExcel } from '../components/exportToExcel';
function Archivesummary() {
    const [form] = Form.useForm();
    const [value, setValue] = useState(1);

    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    // 汇总
    const Summary = () => {
        // 获取表单内数据
        form.validateFields().then(values => {
            console.log('Validated form values:', values);
        }).catch(errorInfo => {
            console.log('Validate Failed:', errorInfo);
        });
    }
    // 打印
    const tableRef = useRef<HTMLDivElement>(null);
    const print = async () => {
        console.log('打印')
        if (tableRef.current) {
            await exportTableToPdf(tableRef.current, 'table_data.pdf');
        }
    }
    // 导出
    const exports = () => {
        console.log('导出')
        exportDataToExcel(datas, 'Archivesummary.xlsx')
    }
    const { RangePicker } = DatePicker;
    // 表格数据
    interface DataType {
        key: string;
        date: string;
        putonrecord: number;
        onfile: number;
        logoff: number
    }


    const columns: TableProps<DataType>['columns'] = [
        {
            title: '建档日期',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '建档人数',
            dataIndex: 'putonrecord',
            key: 'putonrecord',
        },
        {
            title: '在档人数',
            dataIndex: 'onfile',
            key: 'onfile',
        },
        {
            title: '注销人数',
            key: 'logoff',
            dataIndex: 'logoff',
        },
    ];

    const datas: DataType[] = [
        {
            key: '1',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '2',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '3',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '4',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '5',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '6',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '7',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '8',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '9',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },
        {
            key: '10',
            date: '2024-07-08',
            putonrecord: 200,
            onfile: 195,
            logoff: 5
        },

    ];
    return (
        <>
            <div className={style.searchboxs}>
                <Form
                    form={form}
                    style={{ display: 'flex', justifyContent: 'space-between' }}
                    initialValues={{ timetype: value }}
                >
                    <Flex>
                        <Form.Item name='timetype' label='时间类型' rules={[{required:true}]} className={style.itemstyle}>
                            <Radio.Group onChange={onChange}>
                                <Radio value={1}>按天</Radio>
                                <Radio value={2}>按周</Radio>
                                <Radio value={3}>按月</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='timerange' label='时间范围' rules={[{required:true}]} className={style.itemstyle}>
                            <RangePicker style={{ width: 305, height: 32 }} />
                        </Form.Item>
                        <Button type="primary" onClick={Summary} style={{ width: 75, height: 32, borderRadius: 0, marginLeft: 10 }} icon={<SearchOutlined />}>
                            汇总
                        </Button>
                    </Flex>
                    <Flex>
                        <Button style={{ width: 75, height: 32, marginRight: 10, borderRadius: 0 , color:'#0468ff' , borderColor:'#0468ff'}} onClick={print} icon={<PrinterOutlined />}>打印</Button>
                        <Button onClick={exports} style={{ width: 75, height: 32, borderRadius: 0 , color:'#0468ff' ,borderColor:'#0468ff'}} icon={<UploadOutlined />}>导出</Button>
                    </Flex>
                </Form>
                <div ref={tableRef}>
                    <Table<DataType>
                        className={style.tabledata}
                        columns={columns}
                        dataSource={datas}
                        pagination={false}
                        summary={(pageData) => {
                            let totalBorrow = 0;
                            let totalRepayment = 0;
                            let totallogoff = 0
                            pageData.forEach(({ putonrecord, onfile, logoff }) => {
                                totalBorrow += putonrecord;
                                totalRepayment += onfile;
                                totallogoff += logoff
                            });
                            return (
                                <>
                                    <Table.Summary.Row style={{ fontWeight: 700 }}>
                                        <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
                                        <Table.Summary.Cell index={1}>
                                            <span>{totalBorrow}</span>
                                        </Table.Summary.Cell>
                                        <Table.Summary.Cell index={2}>
                                            <span>{totalRepayment}</span>
                                        </Table.Summary.Cell>
                                        <Table.Summary.Cell index={3}>
                                            <span>{totallogoff}</span>
                                        </Table.Summary.Cell>
                                    </Table.Summary.Row>
                                </>
                            );
                        }}
                    />
                </div>
                <Pagination style={{ marginTop: 20 }} showQuickJumper defaultCurrent={2} total={300} showTotal={(total) => `共 ${total} 条数据`} align="end" />
            </div>
        </>
    );
}

export default Archivesummary;